<template>
    <el-card>
        <div class="title-bar">
            <div>
                <div></div>
                <span>服务详情</span>
            </div>

            <img src="/src/assets/daishenhe.png" alt="" v-if="serviceData.state == 1">
            <img src="" alt="" v-else-if="serviceData.state == 2">
            <img src="/src/assets/yibohui.png" alt="" v-else-if="serviceData.state == 0">
            <img src="/src/assets/wancheng.png" alt="" v-else-if="serviceData.state == 3">
            <img src="/src/assets/quxiao.png" alt="" v-else-if="serviceData.state == 4">
        </div>
        <div class="message-bar">
            <span>居民信息</span>
            <el-descriptions :column="4" style="--el-text-color-primary:#999999" label-width="60px">
                <el-descriptions-item label="姓名">{{ serviceData.residentId?.name }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ serviceData.residentId?.IDnumber }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ serviceData.residentId?.gender ? '男' : '女' }}</el-descriptions-item>
                <el-descriptions-item label="年龄">
                    20
                </el-descriptions-item>
                <el-descriptions-item label="联系电话">
                    {{ serviceData.residentId?.phone }}
                </el-descriptions-item>
                <el-descriptions-item label="现居地">
                    {{ serviceData.residentId?.address }}
                </el-descriptions-item>
                <el-descriptions-item label="居民标签">
                    <div class="tag-bar">
                        <el-tag type="danger" effect="light" round>
                            高血压
                        </el-tag>
                        <el-tag type="primary" effect="light" round>
                            冠心病
                        </el-tag>
                        <el-tag type="warning" effect="light" round>
                            高血糖
                        </el-tag>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <div style="width: 100%;height: auto;display: flex;">
                <div
                    style="height: 40px;width: 80px;font-size: 13px;color: #999;margin-right: 10px;padding-right: 12px;text-align: right;line-height: 40px;box-sizing: border-box;">
                    家庭成员</div>
                <div class="relation-bar"
                    style="display: grid;grid-template-columns: repeat(5,200px);justify-content: space-between;width: auto;row-gap: 20px;column-gap: 25px;">
                    <div class="relation-box" v-for="item in relationData">
                        <img :src="item.otherId.avatar" alt="">
                        <section class="relation-message" style="height: auto;width:126px;">
                            <div style="height: 18px;display: flex;width: 133px;">
                                <p style="line-height: 16px;" class="nameBar">{{
                                    item.otherId.name }}</p>
                                <span style="margin: 0 20px 0 0;line-height: 12px;"> 26岁 </span>
                                <img style="width: 12px;height: 12px;" src="/src/assets/girls.png" alt=""
                                    v-if="!item.otherId.gender">
                                <img src="/src/assets/boys.png" alt="" v-else>
                            </div>
                            <span>{{ '关系：' + item.relationship }}</span>
                        </section>
                    </div>

                </div>
                <div></div>
            </div>
        </div>

        <div class="message-bar">
            <span>签约信息</span>
            <el-descriptions :column="4" style="--el-text-color-primary:#999999">
                <el-descriptions-item label="服务编号">{{ serviceData._id }}</el-descriptions-item>
                <el-descriptions-item label="服务状态" style="display: flex;">
                    <span v-if="serviceData.state == 1" style="color:#3DD4A7 ;font-size: 13px;margin: 0;">待审核</span>
                    <span v-if="serviceData.state == 2"
                        style="color:#FDDB78;font-size: 13px;margin: 0;">审核通过，等待用户支付</span>
                    <span v-if="serviceData.state == 0"
                        style="color:#FA746B;font-size: 13px;margin: 0;">已驳回，等待居民修改</span>
                </el-descriptions-item>
                <el-descriptions-item label="服务机构">{{ serviceFullData.organizationId?.name }}</el-descriptions-item>
                <el-descriptions-item label="服务团队">
                    {{ serviceFullData.teamId?.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务医生">
                    {{ serviceFullData.doctorId?.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务包">
                    {{ serviceFullData.servicePackId?.name
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="服务项目">
                    {{ serviceFullData.serviceItemId ? serviceFullData.serviceItemId.name + '(' +
                        serviceData.serviceItemId.count + ')' : ''
                    }}
                    <el-descriptions-item label="服务来源">
                        居民申请
                    </el-descriptions-item>
                </el-descriptions-item>
                <el-descriptions-item label="服务地点">
                    {{ serviceFullData.place }}
                </el-descriptions-item>
                <el-descriptions-item label="预约时间">
                    2020/10/09 10:09:09
                </el-descriptions-item>

                <el-descriptions-item label="提交时间">
                    2020/10/09 10:09:09
                </el-descriptions-item>
                <el-descriptions-item label="审核日期">
                    2020/10/09 10:09:09
                </el-descriptions-item>
                <el-descriptions-item label="审核人">
                    {{ doctorStore.doctorInfo?.name }}
                </el-descriptions-item>
                <el-descriptions-item label="签约备注">
                    {{ serviceData.remark }}
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <div class="button-bar" v-if="serviceData.state == 1">
            <el-button type="primary" @click="toUpdate">编辑详情</el-button>
            <el-button type="success" @click="openGive">审核通过</el-button>
            <el-button type="danger" @click="backBar = true">驳回</el-button>
            <el-button @click="$router.back">返回</el-button>
        </div>
        <div class="button-bar" v-else-if="serviceData.state == 2">
            <el-button type="primary" @click="toUpdate">编辑详情</el-button>
            <el-button type="success" @click="tipPay">完成</el-button>
            <el-button @click="$router.back">返回</el-button>
        </div>
        <div class="button-bar" v-else-if="serviceData.state == 3 || serviceData.state == 4">

            <el-button @click="$router.back">返回</el-button>
        </div>
        <div class="button-bar" v-else="serviceData.state == 0">
            <el-button @click="$router.back">返回</el-button>
        </div>
    </el-card>

    <!-- 驳回 -->
    <el-dialog v-model="backBar" title="驳回确认" width="500">
        <el-form ref="ruleFormRef" :rules="rules" :model="backReason">
            <el-form-item label="驳回原因">
                <el-input prop="backReason" v-model="backReason" style="width: 582px;height: 110px;" :rows="5"
                    type="textarea" placeholder="请输入驳回原因" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="backBar = false">取消</el-button>
                <el-button type="primary" @click="backService">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <CompleteService ref="completeRef" :serviceId="serviceId" @getService="getService" @getFullService="getFullService">
    </CompleteService>
</template>

<script setup>
import { onMounted, ref, useTemplateRef } from 'vue';
import CompleteService from './CompleteService.vue';
import { useRoute, useRouter } from 'vue-router';
// import { getSignDetailApi, getServiceFullApi, updateSignApi } from '../../../api/sighPending';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import { getServiceDetailApi, updateServiceApi } from '../../../api/serviceManage';
import { findResidentRelationApi } from '../../../api/resident';
import { detailServiceFullApi } from '../../../api/service';
import { useGlobalStore } from '../../../store/global';
const router = useRouter()
const backReason = ref('')
const route = useRoute()
const completeRef = useTemplateRef('completeRef')
const serviceData = ref({})
const backBar = ref(false)
function getService() {
    getServiceDetailApi({ _id: route.params._id })
        .then(res => {
            if (res.code == 200) {
                serviceData.value = res.data
                console.log(serviceData.value);

            }
        })
}
const doctorStore = useGlobalStore()

const serviceFullData = ref({})

onMounted(() => {
    getService()
    getRelation()
    getFullService()
    serviceId.value = route.params._id
})

// // 确认驳回
// const toBack = (formEl) => {
//     if (!formEl) return
//     formEl.validate((valid, fields) => {
//         if (valid) {

//             backSign()
//             backBar.value = false

//             console.log('submit!')
//         } else {
//             console.log('error submit!', fields)
//         }
//     })
// }

// 获取服务详情完整
function getFullService() {
    detailServiceFullApi({ _id: route.params._id })
        .then(res => {
            if (res.code == 200) {
                serviceFullData.value = res.data
            }
        })
}

const ruleFormRef = ref()

// 审核通过
function giveService() {
    updateServiceApi({
        _id: serviceData.value._id,
        state: 2
    })
        .then(res => {
            if (res.code == 200) {

                ElMessage({
                    type: 'success',
                    message: '审核通过成功',
                })
                getService()
            } else {
                ElMessage.error(res.message)
            }

        })
}
// 驳回
function backService() {
    updateServiceApi({
        _id: serviceData.value._id,
        state: 0
    })
        .then(res => {
            if (res.code == 200) {
                getService()
                ElMessage({
                    type: 'success',
                    message: '审核驳回成功',
                    reason: backReason.value
                })
                backBar.value = false
            } else {
                ElMessage.error(res.message)
            }
        })
}

const relationData = ref([])

// 获取亲属关系
function getRelation() {
    findResidentRelationApi
        ({ ownId: route.params._id })
        .then(res => {
            if (res.code == 200) {
                relationData.value = res.data
            }
        })
}


const rules = ref({
    backReason: [
        { required: true, message: '原因不能为空', trigger: 'blur' },

    ],

})

// 完成
function tipPay() {
    completeRef.value?.open()
}

// 修改状态
const openGive = () => {
    ElMessageBox.confirm(
        '确定要审核通过吗?',
        '审核确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            giveService()

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消通过审核',
            })
        })
}

const serviceId = ref('')

// 跳转修改页
function toUpdate() {
    router.push('/service/update/:_id' + serviceData.value._id)
}

</script>

<style scoped>
.title-bar {
    height: 40px;
    position: relative;
    border-bottom: 1px solid #dbdbdb;
}

.title-bar img {
    position: absolute;
    width: 66px;
    height: 56px;
    bottom: -20px;
    left: 110px;
}

.title-bar .el-tag {
    margin-bottom: 0;
    color: #fff;
}

.tag-bar .el-tag:not(:last-child) {
    margin-right: 5px;
}

.title-bar>div {
    height: 20px;
    display: flex;
    align-items: center;
}

.title-bar>div>div {
    height: 20px;
    background-color: var(--el-color-primary);
    width: 6px;
    border-radius: 16px;
    margin-right: 15px;
}




.title-bar span {
    color: var(--el-title-font-color);
    font-size: var(--el-title-font-size);
    font-weight: var(--el-title-font-weight);
}



.message-bar>span {
    display: inline-block;
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.message-bar {
    border-bottom: 1px solid #dbdbdb;
    margin-top: 20px;
}

.el-form-item div {
    height: 40px;
    width: 200px;
    line-height: 40px;
    font-size: 13px;
    color: #333;
}

.el-input,
.el-select {
    width: 200px;
    height: 40px;
}

.el-form-item {
    margin-right: 100px;
    margin-bottom: 15px;
}

.tag-bar {
    width: 120px;
    display: inline-block;
    display: flex;
    align-items: center;

}

.button-bar {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>

<style>
.el-descriptions .el-descriptions__label {
    line-height: 40px;
    display: inline-block;
    height: 40px;
    text-align: right !important;
}

.el-descriptions .el-descriptions__content {

    display: inline-block;
}

.el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    font-size: 13px;

}

.relation-bar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 200px);
    justify-content: space-between;
    padding-right: 20px;
    min-height: 84px;
}

.relation-box {
    width: 200px;
    min-height: 84px;
    border-radius: 8px;
    border: 1px solid rgba(242, 242, 242, 1);
    display: flex;
    padding-top: 25px;
    padding-left: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.relation-box>img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
}

.relation-bar .relation-box .relation-message {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.relation-message>div {
    display: inline-block;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.relation-message>div>p {
    font-size: 16px;
    color: #333;
    margin: 0;
    margin-right: 6px;
    line-height: 16px;
}

.relation-message>div>span,
.relation-message span {
    font-size: 12px;
    color: #999;
    margin-right: 20px;
    line-height: 12px;
}

.relation-message>div>img {
    width: 15px;
    height: 15px;
}

.relationMessage {
    display: inline-block;
    display: flex;

}

.relationTitle {
    height: 40px;
    line-height: 40px;
    text-align: right;
    font-size: 13px;
    margin-right: 16px;
    color: #999;
    box-sizing: border-box;
    width: 60px;
}

.relation-bar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 200px);
    justify-content: space-between;
    padding-right: 20px;

}

.relation-box {
    width: 200px;
    min-height: 84px;
    border-radius: 8px;
    border: 1px solid rgba(242, 242, 242, 1);
    display: flex;
    padding-top: 25px;
    padding-left: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.relation-box>img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
}

.relation-bar .relation-box .relation-message {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.relation-message>div {
    display: inline-block;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.relation-message>div>p {
    font-size: 16px;
    color: #333;
    margin: 0;
    margin-right: 6px;
    line-height: 16px;
}

.relation-message>div>span,
.relation-message span {
    font-size: 12px;
    color: #999;
    margin-right: 20px;
    line-height: 12px;
}

.relation-message>div>img {
    width: 15px;
    height: 15px;
}

.addPart {
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    align-items: center;


}

.nameBar {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 超出部分显示为省略号 */
    width: 50px;
}
</style>